import { connect } from 'react-redux';

import './App.css';
import { addTask } from './store/actionCreators'

function App(props) {
  const { tasks, selfAddTask } = props;

  return (
    <div className="App">
      <header className="App-header">
        <input type="text" id="my-task" />
        <button onClick={e => {selfAddTask(document.getElementById('my-task').value)}}>add</button>
        {tasks.map((item, index) => (
          <div key={index}>{item}</div>
        ))}
      </header>
    </div>
  );
}

const mapStateToProps = state => {
  return {
    tasks: state.tasks,
  }
}

const mapDispatchToProps = dispatch => {
  return {
    selfAddTask: task => dispatch(addTask(task)),
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
